<template>
    <section id="monitor-node">
        <el-row>
        <el-col :span="24"  style="width: 100%;height: 40px;background-color: #F5F5F5;">
            <el-form :inline="true" :model="settingData" style="margin-left: 10px;border-radius: 30px">
                <el-form-item label="主机">
                    <i class="iconfont" style="color: orangered" >&#xe725;</i>
                    <el-select  placeholder="请选择主机" v-model="settingData.ip" size="mini" style="width: 150px" @change="getMonitorHostData">
                        <el-option v-for="node in monitorNodes" :label="node" :value="node" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="interval">
                    <el-select  placeholder="请选择时间" v-model="settingData.durtion" size="mini" style="width: 110px">
                        <el-option label="last 15m" value="15"></el-option>
                        <el-option label="last 30m" value="30"></el-option>
                        <el-option label="last 1h" value="60"></el-option>
                        <el-option label="last 5h" value="300"></el-option>
                        <el-option label="last 10h" value="600"></el-option>
                        <el-option label="last 1d" value="1000"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" circle icon="el-icon-refresh" type="text" @click="reloadChart"></el-button>
                </el-form-item>

            </el-form>

        </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" style="width: 100%;height: 25px;background-color: #F5F5F5;margin-top: 5px;text-align: center;font-size: 15px;color: blue"><strong>主机: {{settingData.ip}}</strong></el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="2"  >
                <!--<div id="sysload-chartColumn" style=" width:90%;height:250px;"></div>-->
                <el-row >
                    <el-col :span="24" class="monitor-helf-dark" >

                            <h4 style="text-align: center">CPU 核数</h4>
                            <p style="text-align: center;font-size: 20px;color: blue">{{this.monitorHosts.cpuTotalCore}}</p>

                    </el-col>
                    <el-col :span="24" class="monitor-helf-dark" >

                            <h4 style="text-align: center">内存总量</h4>
                            <p style="text-align: center;font-size: 20px;color: blue">{{this.monitorHosts.memoryTotalValue}}</p>

                    </el-col>

                </el-row>
            </el-col>

            <el-col :span="4" :class="monitorSwitch.sysloadLine ? 'monitor-dark' : ''">

                    <div v-if="monitorSwitch.sysloadLine" >
                        <div style="margin-top: 10px">
                            <el-form ref="sysUpload" :model="alertmanager" label-width="65px" border size="mini" style="overflow-y: auto;max-height: 230px" :rules="monitorAlertRules">
                                <el-form-item label="标签" class="monitor-form-item">
                                    <el-tag size="mini" >{{this.alertmanager.sysUpload.label}}</el-tag>
                                </el-form-item>
                                <el-form-item label="类型">
                                    <el-tag type="danger" size="mini" >{{alertmanager.sysUpload.type}}</el-tag>
                                </el-form-item>
                                <!--默认五分钟内-->

                                <el-form-item label="触发器"  prop="sysUploadCheckRule">
                                    <el-row v-for="(expression,index) in alertmanager.sysUpload.expr " >
                                        <el-col :span="4" style="margin-right: 1px">
                                            <div v-if="index === 0">
                                                <!--<el-tag type="primary" class="minizisevery"  plain style="height: 20px">when</el-tag>-->
                                                <span style="font-size: 6px;background-color: #CCEEFF">when</span>
                                            </div>
                                            <div v-else>
                                                <!--<el-button type="warning" class="minizisesizesize" @click="selectCondition(alertmanager.diskRWRate.operation)">and</el-button>-->
                                                <el-select v-model="alertmanager.sysUpload.operation[index-1]" placeholder="请选择" size="mini" class="minizisevery grayblue " >
                                                    <el-option
                                                            label="AND" value="AND">
                                                    </el-option>
                                                    <el-option
                                                            label="OR" value="OR">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </el-col>
                                        <el-col :span="6" style="margin-right: 1px">
                                            <el-select v-model="expression.key" placeholder="load" class="minizisevery">
                                                <el-option label="load1" value="node_load1"></el-option>
                                                <el-option label="load5" value="node_load5"></el-option>
                                                <el-option label="load15" value="node_load15"></el-option>
                                            </el-select>
                                        </el-col>
                                        <el-col  :span="2" style="margin-right: 1px">
                                            <el-select v-model="expression.logic" placeholder="" class="minizisevery">
                                                <el-option label=">" value=">"></el-option>
                                                <el-option label=">=" value=">="></el-option>
                                                <el-option label="<" value="<"></el-option>
                                                <el-option label="<=" value="<="></el-option>
                                                <el-option label="!=" value="!="></el-option>
                                                <el-option label="&" value="&"></el-option>
                                                <el-option label="|" value="|"></el-option>
                                                <el-option label="!" value="!"></el-option>
                                            </el-select>
                                        </el-col>
                                        <el-col :span="6" style="margin-right: 1px">

                                            <el-input v-model="expression.value" placeholder="负载值" class="minizisevery" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                            <!--<el-input :v-model="index" placeholder="告警数值"></el-input>-->
                                            <!--<el-tag>{{alertmanager.diskRWIOPS.expr[index].value}}</el-tag>-->

                                        </el-col>
                                        <el-col :span="4" style="margin-right: 1px">
                                            <div v-if="index !== 0">
                                                <el-button-group>
                                                    <el-button type="text" icon="el-icon-circle-plus-outline"  @click="addTriggerExpr(alertmanager.sysUpload,index)"></el-button>
                                                    <el-button type="text" icon="el-icon-delete" style="color: red" @click="deleteTriggerExpr(alertmanager.sysUpload,index)"></el-button>
                                                </el-button-group>
                                            </div>
                                            <div v-else>
                                                <el-button type="text" icon="el-icon-circle-plus-outline"   @click="addTriggerExpr(alertmanager.sysUpload,index)"></el-button>
                                            </div>

                                        </el-col>
                                    </el-row>

                                </el-form-item>

                                <el-form-item label="接收者">
                                    <el-row>
                                        <el-col :span="10" >
                                            <el-select v-model="alertmanager.sysUpload.receiver" placeholder="请选择活动区域" class="minizisevery">
                                                <el-option label="DingDing" value="DingDing"></el-option>
                                                <el-option label="Weichat" value="Weichat"></el-option>
                                                <el-option label="Email" value="Email"></el-option>
                                            </el-select>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="warning" plain @click="alertEntrySetHandle(alertmanager.sysUpload,'sysUpload')"  size="mini">应用</el-button>
                                    <el-button @click="monitorSwitch.sysloadLine = false" size="mini">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>


                <div class="monitor-dark" v-else>
                <div id="sysload-chartColumn" style=" width:100%;height:250px;"></div>
                </div>
            </el-col>
            <el-col :span="4" :class="monitorSwitch.memoryUsage ? 'monitor-dark' : ''" >

                <div v-if="monitorSwitch.memoryUsage" >
                    <div style="margin-top: 10px">
                        <el-form ref="memoryUsage" :model="alertmanager" label-width="65px" border size="mini" style="overflow-y: auto;max-height: 230px" :rules="monitorAlertRules">
                            <el-form-item label="标签" class="monitor-form-item">
                                <el-tag size="mini" >{{this.alertmanager.memoryUsage.label}}</el-tag>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-tag type="danger" size="mini" >{{alertmanager.memoryUsage.type}}</el-tag>
                            </el-form-item>
                            <!--默认五分钟内-->

                            <el-form-item label="触发器"  prop="memoryUsageCheckRule">
                                <el-row v-for="(expression,index) in alertmanager.memoryUsage.expr " >

                                    <el-col :span="9" style="margin-right: 1px">
                                        <el-select v-model="expression.key" placeholder="load" class="minizisevery">
                                            <el-option label="Usage" value="Usage"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col  :span="4" style="margin-right: 1px">
                                        <el-select v-model="expression.logic" placeholder="" class="minizisevery">
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                            <el-option label="<" value="<"></el-option>
                                            <el-option label="<=" value="<="></el-option>
                                            <el-option label="!=" value="!="></el-option>
                                            <el-option label="&" value="&"></el-option>
                                            <el-option label="|" value="|"></el-option>
                                            <el-option label="!" value="!"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="9" style="margin-right: 1px">

                                        <el-input v-model="expression.value" placeholder="负载值" class="minizisevery" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                        <!--<el-input :v-model="index" placeholder="告警数值"></el-input>-->
                                        <!--<el-tag>{{alertmanager.diskRWIOPS.expr[index].value}}</el-tag>-->

                                    </el-col>
                                    <!--<el-col :span="4" style="margin-right: 1px">-->
                                        <!--<div v-if="index !== 0">-->
                                            <!--<el-button-group>-->
                                                <!--<el-button type="text" icon="el-icon-circle-plus-outline"  @click="addTriggerExpr(alertmanager.memoryUsage,index)"></el-button>-->
                                                <!--<el-button type="text" icon="el-icon-delete" style="color: red" @click="deleteTriggerExpr(alertmanager.memoryUsage,index)"></el-button>-->
                                            <!--</el-button-group>-->
                                        <!--</div>-->
                                        <!--<div v-else>-->
                                            <!--<el-button type="text" icon="el-icon-circle-plus-outline"   @click="addTriggerExpr(alertmanager.memoryUsage,index)"></el-button>-->
                                        <!--</div>-->

                                    <!--</el-col>-->
                                </el-row>

                            </el-form-item>

                            <el-form-item label="接收者">
                                <el-row>
                                    <el-col :span="9" >
                                        <el-select v-model="alertmanager.sysUpload.receiver" placeholder="请选择活动区域" class="minizisevery">
                                            <el-option label="DingDing" value="DingDing"></el-option>
                                            <el-option label="Weichat" value="Weichat"></el-option>
                                            <el-option label="Email" value="Email"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="warning" plain @click="alertEntrySetHandle(alertmanager.memoryUsage,'memoryUsage')"  size="mini">应用</el-button>
                                <el-button @click="monitorSwitch.memoryUsage = false" size="mini">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <div class="monitor-dark" v-else>
                <div id="memory-chartGauge" style=" height:250px;"></div>
                </div>
            </el-col>
            <el-col :span="4" :class="monitorSwitch.rootPartUsage ? 'monitor-dark' : ''">

                <div v-if="monitorSwitch.rootPartUsage" >
                    <div style="margin-top: 10px">
                        <el-form ref="rootPartUsage" :model="alertmanager" label-width="65px" border size="mini" style="overflow-y: auto;max-height: 230px" :rules="monitorAlertRules">
                            <el-form-item label="标签" class="monitor-form-item">
                                <el-tag size="mini" >{{this.alertmanager.rootPartUsage.label}}</el-tag>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-tag type="danger" size="mini" >{{alertmanager.rootPartUsage.type}}</el-tag>
                            </el-form-item>
                            <!--默认五分钟内-->

                            <el-form-item label="触发器"  prop="rootPartUsageCheckRule">
                                <el-row v-for="(expression,index) in alertmanager.rootPartUsage.expr " >
                                    <el-col :span="9" style="margin-right: 1px">
                                        <el-select v-model="expression.key" placeholder="load" class="minizisevery">
                                            <el-option label="Usage" value="Usage"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col  :span="4" style="margin-right: 1px">
                                        <el-select v-model="expression.logic" placeholder="" class="minizisevery">
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                            <el-option label="<" value="<"></el-option>
                                            <el-option label="<=" value="<="></el-option>
                                            <el-option label="!=" value="!="></el-option>
                                            <el-option label="&" value="&"></el-option>
                                            <el-option label="|" value="|"></el-option>
                                            <el-option label="!" value="!"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="9" style="margin-right: 1px">

                                        <el-input v-model="expression.value" placeholder="负载值" class="minizisevery" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                        <!--<el-input :v-model="index" placeholder="告警数值"></el-input>-->
                                        <!--<el-tag>{{alertmanager.diskRWIOPS.expr[index].value}}</el-tag>-->

                                    </el-col>
                                    <!--<el-col :span="4" style="margin-right: 1px">-->
                                    <!--<div v-if="index !== 0">-->
                                    <!--<el-button-group>-->
                                    <!--<el-button type="text" icon="el-icon-circle-plus-outline"  @click="addTriggerExpr(alertmanager.memoryUsage,index)"></el-button>-->
                                    <!--<el-button type="text" icon="el-icon-delete" style="color: red" @click="deleteTriggerExpr(alertmanager.memoryUsage,index)"></el-button>-->
                                    <!--</el-button-group>-->
                                    <!--</div>-->
                                    <!--<div v-else>-->
                                    <!--<el-button type="text" icon="el-icon-circle-plus-outline"   @click="addTriggerExpr(alertmanager.memoryUsage,index)"></el-button>-->
                                    <!--</div>-->

                                    <!--</el-col>-->
                                </el-row>

                            </el-form-item>

                            <el-form-item label="接收者">
                                <el-row>
                                    <el-col :span="9" >
                                        <el-select v-model="alertmanager.rootPartUsage.receiver" placeholder="请选择活动区域" class="minizisevery">
                                            <el-option label="DingDing" value="DingDing"></el-option>
                                            <el-option label="Weichat" value="Weichat"></el-option>
                                            <el-option label="Email" value="Email"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="warning" plain @click="alertEntrySetHandle(alertmanager.rootPartUsage,'rootPartUsage')"  size="mini">应用</el-button>
                                <el-button @click="monitorSwitch.rootPartUsage = false" size="mini">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <div class="monitor-dark" v-else>
                <div id="root-chartGauge" style=" height:250px;"></div>
                </div>
            </el-col>

            <el-col :span="4" :class="monitorSwitch.openFiles ? 'monitor-dark' : ''">
                <!--<div id="disk-chartGauge" style=" height:250px;"></div>-->
                <!--<h5>当前打开的文件描述符</h5>-->
                <div v-if="monitorSwitch.openFiles" >
                    <div style="margin-top: 10px">
                        <el-form ref="openFiles" :model="alertmanager" label-width="65px" border size="mini" style="overflow-y: auto;max-height: 230px" :rules="monitorAlertRules">
                            <el-form-item label="标签" class="monitor-form-item">
                                <el-tag size="mini" >{{this.alertmanager.openFiles.label}}</el-tag>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-tag type="danger" size="mini" >{{alertmanager.openFiles.type}}</el-tag>
                            </el-form-item>
                            <!--默认五分钟内-->

                            <el-form-item label="触发器"  prop="openFilesCheckRule">
                                <el-row v-for="(expression,index) in alertmanager.openFiles.expr " >
                                    <el-col :span="9" style="margin-right: 1px">
                                        <el-select v-model="expression.key" placeholder="load" class="minizisevery">
                                            <el-option label="OpenFiles" value="OpenFiles"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col  :span="4" style="margin-right: 1px">
                                        <el-select v-model="expression.logic" placeholder="" class="minizisevery">
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                            <el-option label="<" value="<"></el-option>
                                            <el-option label="<=" value="<="></el-option>
                                            <el-option label="!=" value="!="></el-option>
                                            <el-option label="&" value="&"></el-option>
                                            <el-option label="|" value="|"></el-option>
                                            <el-option label="!" value="!"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="9" style="margin-right: 1px">

                                        <el-input v-model="expression.value" placeholder="负载值" class="minizisevery" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                        <!--<el-input :v-model="index" placeholder="告警数值"></el-input>-->
                                        <!--<el-tag>{{alertmanager.diskRWIOPS.expr[index].value}}</el-tag>-->

                                    </el-col>
                                    <!--<el-col :span="4" style="margin-right: 1px">-->
                                    <!--<div v-if="index !== 0">-->
                                    <!--<el-button-group>-->
                                    <!--<el-button type="text" icon="el-icon-circle-plus-outline"  @click="addTriggerExpr(alertmanager.memoryUsage,index)"></el-button>-->
                                    <!--<el-button type="text" icon="el-icon-delete" style="color: red" @click="deleteTriggerExpr(alertmanager.memoryUsage,index)"></el-button>-->
                                    <!--</el-button-group>-->
                                    <!--</div>-->
                                    <!--<div v-else>-->
                                    <!--<el-button type="text" icon="el-icon-circle-plus-outline"   @click="addTriggerExpr(alertmanager.memoryUsage,index)"></el-button>-->
                                    <!--</div>-->

                                    <!--</el-col>-->
                                </el-row>

                            </el-form-item>

                            <el-form-item label="接收者">
                                <el-row>
                                    <el-col :span="9" >
                                        <el-select v-model="alertmanager.openFiles.receiver" placeholder="请选择活动区域" class="minizisevery">
                                            <el-option label="DingDing" value="DingDing"></el-option>
                                            <el-option label="Weichat" value="Weichat"></el-option>
                                            <el-option label="Email" value="Email"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="warning" plain @click="alertEntrySetHandle(alertmanager.openFiles,'openFiles')"  size="mini">应用</el-button>
                                <el-button @click="monitorSwitch.openFiles = false" size="mini">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <div class="monitor-dark" v-else>
                <div id="filedescnum-chartGauge" style=" height:250px;"></div>
                </div>
            </el-col>
            <el-col :span="6" :class="monitorSwitch.tcpChartPie ? 'monitor-dark' : ''">
                <!--<div id="disk-chartGauge" style=" height:250px;"></div>-->

                <div v-if="monitorSwitch.tcpChartPie" >
                    <div style="margin-top: 10px">
                        <el-form ref="estabandtimewait" :model="alertmanager" label-width="80px" border size="mini" style="overflow-y: auto;max-height: 230px" :rules="monitorAlertRules">
                            <el-form-item label="标签" class="monitor-form-item">
                                <el-tag size="mini" >{{this.alertmanager.estabandtimewait.label}}</el-tag>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-tag type="danger" size="mini" >{{alertmanager.estabandtimewait.type}}</el-tag>
                            </el-form-item>
                            <!--默认五分钟内-->

                            <el-form-item label="触发器"  prop="tcpConnectStatusRule">
                                <el-row v-for="(expression,index) in alertmanager.estabandtimewait.expr " >
                                    <el-col :span="5" style="margin-right: 2px">
                                        <div v-if="index === 0" style="width: 100%;background-color: #CCEEFF;text-align: center">
                                            <!--<el-tag type="primary" class="minizisevery"  plain style="height: 20px">when</el-tag>-->
                                            <span style="font-size: 15px;background-color: #CCEEFF;width: 100px">when</span>
                                        </div>
                                        <div v-else>
                                            <!--<el-button type="warning" class="minizisesizesize" @click="selectCondition(alertmanager.diskRWRate.operation)">and</el-button>-->
                                            <el-select v-model="alertmanager.estabandtimewait.operation[index-1]" placeholder="请选择" size="mini" class=" grayblue " >
                                                <el-option
                                                        label="AND" value="AND">
                                                </el-option>
                                                <el-option
                                                        label="OR" value="OR">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" style="margin-right: 2px">
                                        <el-select v-model="expression.key" placeholder="TW">
                                            <el-option label="TIME_WAIT" value="node_sockstat_TCP_tw"></el-option>
                                            <el-option label="ESTABLISHED" value="node_netstat_Tcp_CurrEstab"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col  :span="4" style="margin-right: 2px">
                                        <el-select v-model="expression.logic" placeholder="">
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                            <el-option label="<" value="<"></el-option>
                                            <el-option label="<=" value="<="></el-option>
                                            <el-option label="!=" value="!="></el-option>
                                            <el-option label="&" value="&"></el-option>
                                            <el-option label="|" value="|"></el-option>
                                            <el-option label="!" value="!"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="5">

                                        <el-input v-model="expression.value" placeholder="告警值" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                        <!--<el-input :v-model="index" placeholder="告警数值"></el-input>-->
                                        <!--<el-tag>{{alertmanager.diskRWIOPS.expr[index].value}}</el-tag>-->

                                    </el-col>
                                    <el-col :span="3" style="margin-right: 2px">
                                        <div v-if="index !== 0">
                                            <el-button-group>
                                                <el-button type="text" icon="el-icon-circle-plus-outline"  style="margin-left: 5px" @click="addTriggerExpr(alertmanager.estabandtimewait,index)"></el-button>
                                                <el-button type="text" icon="el-icon-delete" style="margin-left: 5px;color: red" @click="deleteTriggerExpr(alertmanager.estabandtimewait,index)"></el-button>
                                            </el-button-group>
                                        </div>
                                        <div v-else>
                                            <el-button type="text" icon="el-icon-circle-plus-outline"  style="margin-left: 5px" @click="addTriggerExpr(alertmanager.estabandtimewait,index)"></el-button>
                                        </div>

                                    </el-col>
                                </el-row>

                            </el-form-item>

                            <el-form-item label="接收者">
                                <el-row>
                                    <el-col :span="8" >
                                        <el-select v-model="alertmanager.estabandtimewait.receiver" placeholder="请选择活动区域" >
                                            <el-option label="DingDing" value="DingDing"></el-option>
                                            <el-option label="Weichat" value="Weichat"></el-option>
                                            <el-option label="Email" value="Email"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="warning" plain @click="alertEntrySetHandle(alertmanager.estabandtimewait,'estabandtimewait')"  size="mini">应用</el-button>
                                <el-button @click="monitorSwitch.tcpChartPie = false" size="mini">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <div class="monitor-dark" v-else>
                <div id="tcp-chartPie" style="width:100%; height:250px;"></div>
                </div>

            </el-col>


            <!--<el-col :span="8">-->
                <!--<div id="chartBar" style="width:90%; height:400px;"></div>-->
            <!--</el-col>-->

            <!--<el-col :span="8">-->
                <!--<div id="chartPie" style="width:90%; height:400px;"></div>-->
            <!--</el-col>-->
            <!--<el-col :span="24">-->
                <!--<a href="http://echarts.baidu.com/examples.html" target="_blank" style="float: right;">more>></a>-->
            <!--</el-col>-->
        </el-row>

        <el-row style="margin-top: 10px" :gutter="10" >
            <el-col :span="8" :class="monitorSwitch.sdaRWIopsLine ? 'monitor-dark' : ''">

                <div v-if="monitorSwitch.sdaRWIopsLine" >
                    <div style="margin-top: 10px;">
                        <el-form ref="diskRWIOPS" :model="alertmanager" label-width="80px" border size="mini" style="overflow-y: auto;max-height: 230px" :rules="monitorAlertRules">
                            <el-form-item label="标签" class="monitor-form-item">

                                <el-tag size="mini" style="margin-left: 5px">{{this.alertmanager.diskRWIOPS.label}}</el-tag>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-tag type="danger" size="mini" style="margin-left: 5px">{{alertmanager.diskRWIOPS.type}}</el-tag>
                            </el-form-item>
                            <!--默认五分钟内-->

                            <el-form-item label="触发器"  prop="diskRWIOPSCheckRule">
                                <el-row v-for="(expression,index) in alertmanager.diskRWIOPS.expr " >
                                    <el-col :span="4" style="margin-right: 5px">
                                        <div v-if="index === 0">
                                            <el-button type="primary" class="minizisesizesize" plain>when</el-button>
                                        </div>
                                        <div v-else>
                                            <!--<el-button type="warning" class="minizisesizesize" @click="selectCondition(alertmanager.diskRWRate.operation)">and</el-button>-->
                                            <el-select v-model="alertmanager.diskRWIOPS.operation[index-1]" placeholder="请选择" size="mini" class="minizisesizesize" >
                                                <el-option
                                                        label="AND" value="AND">
                                                </el-option>
                                                <el-option
                                                        label="OR" value="OR">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" style="margin-right: 5px">
                                        <el-select v-model="expression.key" placeholder="avg(告警指标)">
                                            <el-option label="read_iops" value="node_disk_reads_completed_total"></el-option>
                                            <el-option label="write_iops" value="node_disk_writes_completed_total"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col  :span="4" style="margin-right: 5px">
                                        <el-select v-model="expression.logic" placeholder="">
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                            <el-option label="<" value="<"></el-option>
                                            <el-option label="<=" value="<="></el-option>
                                            <el-option label="!=" value="!="></el-option>
                                            <el-option label="&" value="&"></el-option>
                                            <el-option label="|" value="|"></el-option>
                                            <el-option label="!" value="!"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="5">

                                        <el-input v-model="expression.value" placeholder="告警数值" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                        <!--<el-input :v-model="index" placeholder="告警数值"></el-input>-->
                                        <!--<el-tag>{{alertmanager.diskRWIOPS.expr[index].value}}</el-tag>-->

                                    </el-col>
                                    <el-col :span="3" style="margin-right: 5px">
                                        <div v-if="index !== 0">
                                            <el-button-group>
                                            <el-button type="text" icon="el-icon-circle-plus-outline"  style="margin-left: 5px" @click="addTriggerExpr(alertmanager.diskRWIOPS,index)"></el-button>
                                            <el-button type="text" icon="el-icon-delete" style="margin-left: 5px;color: red" @click="deleteTriggerExpr(alertmanager.diskRWIOPS,index)"></el-button>
                                            </el-button-group>
                                        </div>
                                        <div v-else>
                                            <el-button type="text" icon="el-icon-circle-plus-outline"  style="margin-left: 5px" @click="addTriggerExpr(alertmanager.diskRWIOPS,index)"></el-button>
                                        </div>

                                    </el-col>
                                </el-row>

                            </el-form-item>

                            <el-form-item label="接收者">
                                <el-row>
                                    <el-col :span="6" style="margin-left: 5px">
                                        <el-select v-model="alertmanager.diskRWIOPS.receiver" placeholder="请选择活动区域">
                                            <el-option label="DingDing" value="DingDing"></el-option>
                                            <el-option label="Weichat" value="Weichat"></el-option>
                                            <el-option label="Email" value="Email"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="warning" plain @click="alertEntrySetHandle(alertmanager.diskRWIOPS,'diskRWIOPS')" style="margin-left: 5px" size="mini">应用</el-button>
                                <el-button @click="monitorSwitch.sdaRWIopsLine = false" size="mini">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <div class="monitor-dark" v-else>
                    <!--<div id="diskLine" style="width:100%; height:250px;"></div>-->
                    <div id="diskIopsLine" style="width:100%; height:250px;"></div>
                </div>
            </el-col>

            <el-col :span="8" :class="monitorSwitch.sdaRWRateLine ? 'monitor-dark' : ''">

                <div v-if="monitorSwitch.sdaRWRateLine" >
                    <div style="margin-top: 10px;" >
                        <el-form ref="diskRWRate" :model="alertmanager" label-width="80px" border size="mini" style="overflow-y: auto;max-height: 230px" :rules="monitorAlertRules">
                            <el-form-item label="标签" class="monitor-form-item">

                                <el-tag size="mini" style="margin-left: 5px">{{this.alertmanager.diskRWRate.label}}</el-tag>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-tag type="danger" size="mini" style="margin-left: 5px">{{alertmanager.diskRWRate.type}}</el-tag>
                            </el-form-item>
                            <!--默认五分钟内-->

                            <el-form-item label="触发器"  prop="diskRWRATECheckRule">
                                <el-row v-for="(expression,index) in alertmanager.diskRWRate.expr " >
                                    <el-col :span="4" style="margin-right: 5px">
                                        <div v-if="index === 0">
                                            <el-button type="primary" class="minizisesizesize" plain >when</el-button>
                                        </div>
                                        <div v-else>
                                            <!--<el-button type="warning" class="minizisesizesize" @click="selectCondition(alertmanager.diskRWRate.operation)">and</el-button>-->
                                            <el-select v-model="alertmanager.diskRWRate.operation[index-1]" placeholder="请选择" size="mini" class="minizisesizesize" >
                                                <el-option
                                                        label="AND" value="AND">
                                                </el-option>
                                                <el-option
                                                        label="OR" value="OR">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" style="margin-right: 5px">
                                        <el-select v-model="expression.key" placeholder="avg(告警指标)">
                                            <el-option label="read_rate" value="node_disk_read_bytes_total"></el-option>
                                            <el-option label="write_rate" value="node_disk_written_bytes_total"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col  :span="4" style="margin-right: 5px">
                                        <el-select v-model="expression.logic" placeholder="">
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                            <el-option label="<" value="<"></el-option>
                                            <el-option label="<=" value="<="></el-option>
                                            <el-option label="!=" value="!="></el-option>
                                            <el-option label="&" value="&"></el-option>
                                            <el-option label="|" value="|"></el-option>
                                            <el-option label="!" value="!"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="5">

                                        <el-input v-model="expression.value" placeholder="告警值(KB/s)" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                        <!--<el-input :v-model="index" placeholder="告警数值"></el-input>-->
                                        <!--<el-tag>{{alertmanager.diskRWIOPS.expr[index].value}}</el-tag>-->

                                    </el-col>
                                    <el-col :span="3" style="margin-right: 5px">
                                        <div v-if="index !== 0">
                                            <el-button-group>
                                                <el-button type="text" icon="el-icon-circle-plus-outline"  style="margin-left: 5px" @click="addTriggerExpr(alertmanager.diskRWRate,index)"></el-button>
                                                <el-button type="text" icon="el-icon-delete" style="margin-left: 5px;color: red" @click="deleteTriggerExpr(alertmanager.diskRWRate,index)"></el-button>
                                            </el-button-group>
                                        </div>
                                        <div v-else>
                                            <el-button type="text" icon="el-icon-circle-plus-outline"  style="margin-left: 5px" @click="addTriggerExpr(alertmanager.diskRWRate,index)"></el-button>
                                        </div>

                                    </el-col>
                                </el-row>

                            </el-form-item>

                            <el-form-item label="接收者">
                                <el-row>
                                    <el-col :span="6" style="margin-left: 5px">
                                        <el-select v-model="alertmanager.diskRWRate.receiver" placeholder="请选择活动区域">
                                            <el-option label="DingDing" value="DingDing"></el-option>
                                            <el-option label="Weichat" value="Weichat"></el-option>
                                            <el-option label="Email" value="Email"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="warning" plain @click="alertEntrySetHandle(alertmanager.diskRWRate,'diskRWRate')" style="margin-left: 5px" size="mini">应用</el-button>
                                <el-button @click="monitorSwitch.sdaRWRateLine = false" size="mini">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <div class="monitor-dark" v-else>
                <!--<div id="diskLine" style="width:100%; height:250px;"></div>-->
                <div id="diskIORateLine" style="width:100%; height:250px;"></div>
                </div>
            </el-col>



            <el-col :span="8"  :class="monitorSwitch.diskUsage ? 'monitor-dark' : ''" >

                <div v-if="monitorSwitch.diskUsage" >
                    <div style="margin-top: 10px;" >
                        <el-form ref="diskUsage" :model="alertmanager" label-width="80px" border size="mini" style="overflow-y: auto;max-height: 230px" :rules="monitorAlertRules">
                            <el-form-item label="标签" class="monitor-form-item">

                                <el-tag size="mini" >{{this.alertmanager.diskUsage.label}}</el-tag>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-tag type="danger" size="mini" >{{alertmanager.diskUsage.type}}</el-tag>
                            </el-form-item>
                            <!--默认五分钟内-->

                            <el-form-item label="触发器"  prop="diskUsageCheckRule">
                                <el-row v-for="(expression,index) in alertmanager.diskUsage.expr " >
                                    <el-col :span="6" >
                                        <el-select v-model="expression.key" placeholder="使用率">
                                            <el-option label="ANY(usage)" value="USAGE"></el-option>

                                        </el-select>
                                    </el-col>
                                    <el-col  :span="4" >
                                        <el-select v-model="expression.logic" placeholder="">
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                            <!--<el-option label="<" value="<" disabled></el-option>-->
                                            <!--<el-option label="<=" value="<="></el-option>-->
                                            <!--<el-option label="!=" value="!="></el-option>-->
                                            <!--<el-option label="&" value="&"></el-option>-->
                                            <!--<el-option label="|" value="|"></el-option>-->
                                            <!--<el-option label="!" value="!"></el-option>-->
                                        </el-select>
                                    </el-col>
                                    <el-col :span="5">

                                        <el-input v-model="expression.value" placeholder="告警值"></el-input>
                                        <!--<el-input :v-model="index" placeholder="告警数值"></el-input>-->
                                        <!--<el-tag>{{alertmanager.diskRWIOPS.expr[index].value}}</el-tag>-->

                                    </el-col>

                                </el-row>

                            </el-form-item>

                            <el-form-item label="接收者">
                                <el-row>
                                    <el-col :span="6" >
                                        <el-select v-model="alertmanager.diskUsage.receiver" placeholder="请选择活动区域">
                                            <el-option label="DingDing" value="DingDing"></el-option>
                                            <el-option label="Weichat" value="Weichat"></el-option>
                                            <el-option label="Email" value="Email"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="warning" plain @click="alertEntrySetHandle(alertmanager.diskUsage,'diskUsage')"  size="mini" disabled>应用</el-button>
                                <el-button @click="monitorSwitch.diskUsage = false" size="mini">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <div style="text-align: center;margin-bottom: 5px;font-weight: bold" class="monitor-dark" v-else>
                    <div>
                    磁盘使用情况
                    <el-button type="text" size="small" icon="el-icon-message-solid" style="float: right;color: black;font-weight: bold;margin-right: 5px" @click="monitorSwitch.diskUsage = true">
                    </el-button>
                    </div>
                    <el-table
                            v-if="diskMonitorVisible"
                            :data="monitorHosts.diskStatus"

                            max-height="200"
                            border
                            stripe
                            :header-cell-style="disHeaderClass"
                            :row-style="disrowClass"
                            :header-row-style="tableHeaderClass"
                            :cell-style="tablePaddingClass"
                    >
                        <el-table-column
                                prop="Fstype"
                                label="文件系统"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="Mountpoint"
                                label="挂载点"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="Availed"
                                label="可用空间">
                        </el-table-column>
                        <el-table-column
                                prop="Precent"
                                label="使用率">
                        </el-table-column>
                    </el-table>
                </div>
                <!--<div id="diskLine" style="width:100%; height:250px;"></div>-->
                <!--<div id="disk-chartGauge" style=" height:250px;"></div>-->


            </el-col>

        </el-row>


        <el-row style="margin-top: 10px" :gutter="10" >
            <!--<el-col :span="12" >-->
                <!--<div class="monitor-dark">-->
                <!--<div id="networkLine" style="width:100%; height:250px;"></div>-->
                <!--</div>-->
            <!--</el-col>-->
            <el-col :span="12" :class="monitorSwitch.networkIOline ? 'monitor-dark' : ''" >

                <div v-if="monitorSwitch.networkIOline" >
                    <div style="margin-top: 10px;">
                        <el-form ref="networkIORate" :model="alertmanager" label-width="80px" border size="mini" style="overflow-y: auto;max-height: 230px" :rules="monitorAlertRules">
                            <el-form-item label="标签" class="monitor-form-item">

                                <el-tag size="mini" style="margin-left: 5px">{{this.alertmanager.networkIORate.label}}</el-tag>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-tag type="danger" size="mini" style="margin-left: 5px">{{alertmanager.networkIORate.type}}</el-tag>
                            </el-form-item>
                            <!--默认五分钟内-->

                            <el-form-item label="触发器"  prop="networkIOCheckRule">
                                <el-row v-for="(expression,index) in alertmanager.networkIORate.expr " >
                                    <el-col :span="3" style="margin-right: 5px">
                                        <div v-if="index === 0">
                                            <el-button type="primary" class="minizisesizesize" plain>when</el-button>
                                        </div>
                                        <div v-else>
                                            <!--<el-button type="warning" class="minizisesizesize" @click="selectCondition(alertmanager.diskRWRate.operation)">and</el-button>-->
                                            <el-select v-model="alertmanager.networkIORate.operation[index-1]" placeholder="请选择" size="mini" class="minizisesizesize" >
                                                <el-option
                                                        label="AND" value="AND">
                                                </el-option>
                                                <el-option
                                                        label="OR" value="OR">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" style="margin-right: 5px">
                                        <el-select v-model="expression.key" placeholder="avg(告警指标)">
                                            <el-option label="receive" value="node_network_receive_bytes_total"></el-option>
                                            <el-option label="transmit" value="node_network_transmit_bytes_total"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col  :span="4" style="margin-right: 5px">
                                        <el-select v-model="expression.logic" placeholder="">
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                            <el-option label="<" value="<"></el-option>
                                            <el-option label="<=" value="<="></el-option>
                                            <el-option label="!=" value="!="></el-option>
                                            <el-option label="&" value="&"></el-option>
                                            <el-option label="|" value="|"></el-option>
                                            <el-option label="!" value="!"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="5">

                                        <el-input v-model="expression.value" placeholder="告警值(KB/m)" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                        <!--<el-input :v-model="index" placeholder="告警数值"></el-input>-->
                                        <!--<el-tag>{{alertmanager.diskRWIOPS.expr[index].value}}</el-tag>-->

                                    </el-col>
                                    <el-col :span="3" style="margin-right: 5px">
                                        <div v-if="index !== 0">
                                            <el-button-group>
                                                <el-button type="text" icon="el-icon-circle-plus-outline"  style="margin-left: 5px" @click="addTriggerExpr(alertmanager.networkIORate,index)"></el-button>
                                                <el-button type="text" icon="el-icon-delete" style="margin-left: 5px;color: red" @click="deleteTriggerExpr(alertmanager.networkIORate,index)"></el-button>
                                            </el-button-group>
                                        </div>
                                        <div v-else>
                                            <el-button type="text" icon="el-icon-circle-plus-outline"  style="margin-left: 5px" @click="addTriggerExpr(alertmanager.networkIORate,index)"></el-button>
                                        </div>

                                    </el-col>
                                </el-row>

                            </el-form-item>

                            <el-form-item label="接收者">
                                <el-row>
                                    <el-col :span="4" style="margin-left: 5px">
                                        <el-select v-model="alertmanager.networkIORate.receiver" placeholder="请选择活动区域">
                                            <el-option label="DingDing" value="DingDing"></el-option>
                                            <el-option label="Weichat" value="Weichat"></el-option>
                                            <el-option label="Email" value="Email"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="warning" plain @click="alertEntrySetHandle(alertmanager.networkIORate,'networkIORate')" style="margin-left: 5px" size="mini">应用</el-button>
                                <el-button @click="monitorSwitch.networkIOline = false" size="mini">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <div class="monitor-dark" v-else>
                    <!--<div id="diskLine" style="width:100%; height:250px;"></div>-->
                    <div id="networkLine" style="width:100%; height:250px;"></div>
                </div>
            </el-col>


            <el-col :span="12" :class="monitorSwitch.tcpConnectionStatus ? 'monitor-dark' : ''">
                <!--<div id="diskLine" style="width:100%; height:250px;"></div>-->
                <div v-if="monitorSwitch.tcpConnectionStatus" >
                    <div style="margin-top: 10px;">
                        <el-form ref="tcpConnectionStatus" :model="alertmanager" label-width="80px" border size="mini" style="overflow-y: auto;max-height: 230px" :rules="monitorAlertRules">
                            <el-form-item label="标签" class="monitor-form-item">

                                <el-tag size="mini" style="margin-left: 5px">{{this.alertmanager.tcpConnectionStatus.label}}</el-tag>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-tag type="danger" size="mini" style="margin-left: 5px">{{alertmanager.tcpConnectionStatus.type}}</el-tag>
                            </el-form-item>
                            <!--默认五分钟内-->

                            <el-form-item label="触发器"  prop="tcpConnectionCheckRule">
                                <el-row v-for="(expression,index) in alertmanager.tcpConnectionStatus.expr " >
                                    <el-col :span="3" style="margin-right: 5px">
                                        <div v-if="index === 0">
                                            <el-button type="primary" class="minizisesizesize" plain>when</el-button>
                                        </div>
                                        <div v-else>
                                            <!--<el-button type="warning" class="minizisesizesize" @click="selectCondition(alertmanager.diskRWRate.operation)">and</el-button>-->
                                            <el-select v-model="alertmanager.tcpConnectionStatus.operation[index-1]" placeholder="请选择" size="mini" class="minizisesizesize" >
                                                <el-option
                                                        label="AND" value="AND">
                                                </el-option>
                                                <el-option
                                                        label="OR" value="OR">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" style="margin-right: 5px">
                                        <el-select v-model="expression.key" placeholder="avg(告警指标)">
                                            <el-option label="TIME_WAIT" value="node_sockstat_TCP_tw"></el-option>
                                            <el-option label="ESTABLISHED" value="node_netstat_Tcp_CurrEstab"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col  :span="4" style="margin-right: 5px">
                                        <el-select v-model="expression.logic" placeholder="">
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                            <el-option label="<" value="<"></el-option>
                                            <el-option label="<=" value="<="></el-option>
                                            <el-option label="!=" value="!="></el-option>
                                            <el-option label="&" value="&"></el-option>
                                            <el-option label="|" value="|"></el-option>
                                            <el-option label="!" value="!"></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="5">

                                        <el-input v-model="expression.value" placeholder="告警数值" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                        <!--<el-input :v-model="index" placeholder="告警数值"></el-input>-->
                                        <!--<el-tag>{{alertmanager.diskRWIOPS.expr[index].value}}</el-tag>-->

                                    </el-col>
                                    <el-col :span="3" style="margin-right: 5px">
                                        <div v-if="index !== 0">
                                            <el-button-group>
                                                <el-button type="text" icon="el-icon-circle-plus-outline"  style="margin-left: 5px" @click="addTriggerExpr(alertmanager.tcpConnectionStatus,index)"></el-button>
                                                <el-button type="text" icon="el-icon-delete" style="margin-left: 5px;color: red" @click="deleteTriggerExpr(alertmanager.tcpConnectionStatus,index)"></el-button>
                                            </el-button-group>
                                        </div>
                                        <div v-else>
                                            <el-button type="text" icon="el-icon-circle-plus-outline"  style="margin-left: 5px" @click="addTriggerExpr(alertmanager.tcpConnectionStatus,index)"></el-button>
                                        </div>

                                    </el-col>
                                </el-row>

                            </el-form-item>

                            <el-form-item label="接收者">
                                <el-row>
                                    <el-col :span="4" style="margin-left: 5px">
                                        <el-select v-model="alertmanager.tcpConnectionStatus.receiver" placeholder="请选择活动区域">
                                            <el-option label="DingDing" value="DingDing"></el-option>
                                            <el-option label="Weichat" value="Weichat"></el-option>
                                            <el-option label="Email" value="Email"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="warning" plain @click="alertEntrySetHandle(alertmanager.tcpConnectionStatus,'tcpConnectionStatus')" style="margin-left: 5px" size="mini">应用</el-button>
                                <el-button @click="monitorSwitch.tcpConnectionStatus = false" size="mini">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div  class="monitor-dark" v-else>
                <div id="tcpConnLine"  style="width:100%; height:250px;" ></div>
                </div>
            </el-col>
        </el-row>

    </section>
</template>

<script>
    import echarts from 'echarts'
    import { monitorHostData,alertEntrySet,getMonitorNodes,monitorAlertData } from '../../api/api'

    export default {
        data() {

            var alertsysloadExprCheck = (rule, value, callback) => {
                let self = this
                let express = self.alertmanager.sysUpload.expr
                let ok = true
                let msg = ""

                let judge = new Map()

                for (var i=0;i < express.length;i++) {
                    console.log(express[i].key)
                    console.log(express[i].logic)
                    console.log(express[i].value)
                    if (express[i].key === "" || express[i].value === "") {
                        ok = false
                        msg = "请完善空选项"
                        break
                    } else if (judge.has(express[i].key + express[i].logic)) {
                        ok = false
                        msg = "重复表达式"
                        false
                    } else {
                        judge.set(express[i].key + express[i].logic,"join")
                    }

                }

                if (!ok) {
                    callback(new Error(msg));
                } else {
                    callback()
                }

            };
            var alertMemoryUsageExprCheck = (rule, value, callback) => {
                let self = this
                let express = self.alertmanager.memoryUsage.expr
                let ok = true
                let msg = ""

                let judge = new Map()

                for (var i=0;i < express.length;i++) {
                    console.log(express[i].key)
                    console.log(express[i].logic)
                    console.log(express[i].value)
                    if (express[i].key === "" || express[i].value === "") {
                        ok = false
                        msg = "请完善空选项"
                        break
                    } else if (judge.has(express[i].key + express[i].logic)) {
                        ok = false
                        msg = "重复表达式"
                        false
                    } else {
                        judge.set(express[i].key + express[i].logic,"join")
                    }

                }

                if (!ok) {
                    callback(new Error(msg));
                } else {
                    callback()
                }

            };
            var alertRootPartUsageExprCheck = (rule, value, callback) => {
                let self = this
                let express = self.alertmanager.rootPartUsage.expr
                let ok = true
                let msg = ""

                let judge = new Map()

                for (var i=0;i < express.length;i++) {
                    console.log(express[i].key)
                    console.log(express[i].logic)
                    console.log(express[i].value)
                    if (express[i].key === "" || express[i].value === "") {
                        ok = false
                        msg = "请完善空选项"
                        break
                    } else if (judge.has(express[i].key + express[i].logic)) {
                        ok = false
                        msg = "重复表达式"
                        false
                    } else {
                        judge.set(express[i].key + express[i].logic,"join")
                    }

                }

                if (!ok) {
                    callback(new Error(msg));
                } else {
                    callback()
                }

            };
            var alertOpenFilesExprCheck = (rule, value, callback) => {
                let self = this
                let express = self.alertmanager.openFiles.expr
                let ok = true
                let msg = ""

                let judge = new Map()

                for (var i=0;i < express.length;i++) {
                    console.log(express[i].key)
                    console.log(express[i].logic)
                    console.log(express[i].value)
                    if (express[i].key === "" || express[i].value === "") {
                        ok = false
                        msg = "请完善空选项"
                        break
                    } else if (judge.has(express[i].key + express[i].logic)) {
                        ok = false
                        msg = "重复表达式"
                        false
                    } else {
                        judge.set(express[i].key + express[i].logic,"join")
                    }

                }

                if (!ok) {
                    callback(new Error(msg));
                } else {
                    callback()
                }

            };
            var alertTcpConnectStatusExprCheck = (rule, value, callback) => {
                let self = this
                let express = self.alertmanager.estabandtimewait.expr
                let ok = true
                let msg = ""

                let judge = new Map()

                for (var i=0;i < express.length;i++) {
                    console.log(express[i].key)
                    console.log(express[i].logic)
                    console.log(express[i].value)
                    if (express[i].key === "" || express[i].value === "") {
                        ok = false
                        msg = "请完善空选项"
                        break
                    } else if (judge.has(express[i].key + express[i].logic)) {
                        ok = false
                        msg = "重复表达式"
                        false
                    } else {
                        judge.set(express[i].key + express[i].logic,"join")
                    }

                }

                if (!ok) {
                    callback(new Error(msg));
                } else {
                    callback()
                }

            };

            var alertdiskRWIOPSExprCheck = (rule, value, callback) => {
                let self = this
                console.log(self.alertmanager.diskRWIOPS.expr)
                let express = self.alertmanager.diskRWIOPS.expr
                let ok = true
                let msg = ""

                let judge = new Map()

                for (var i=0;i < express.length;i++) {
                    console.log(express[i].key)
                    console.log(express[i].logic)
                    console.log(express[i].value)
                    if (express[i].key === "" || express[i].value === "") {
                        ok = false
                        msg = "请完善空选项"
                        break
                    } else if (judge.has(express[i].key + express[i].logic)) {
                        ok = false
                        msg = "重复表达式指标"
                        false
                    } else {
                        judge.set(express[i].key + express[i].logic,"join")
                    }

                }

                if (!ok) {
                    callback(new Error(msg));
                } else {
                    callback()
                }

            };
            var alertdiskRWRATEExprCheck = (rule, value, callback) => {
                let self = this

                let express = self.alertmanager.diskRWRate.expr
                let ok = true
                let msg = ""

                let judge = new Map()

                for (var i=0;i < express.length;i++) {
                    console.log(express[i].key)
                    console.log(express[i].logic)
                    console.log(express[i].value)
                    if (express[i].key === "" || express[i].value === "") {
                        ok = false
                        msg = "请完善空选项"
                        break
                    } else if (judge.has(express[i].key + express[i].logic)) {
                        ok = false
                        msg = "重复表达式指标"
                        false
                    } else {
                        judge.set(express[i].key + express[i].logic,"join")
                    }

                }

                if (!ok) {
                    callback(new Error(msg));
                } else {
                    callback()
                }

            };

            var alertNetworkIOExprCheck = (rule, value, callback) => {
                let self = this

                let express = self.alertmanager.networkIORate.expr
                let ok = true
                let msg = ""

                let judge = new Map()

                for (var i=0;i < express.length;i++) {
                    console.log(express[i].key)
                    console.log(express[i].logic)
                    console.log(express[i].value)
                    if (express[i].key === "" || express[i].value === "") {
                        ok = false
                        msg = "请完善空选项"
                        break
                    } else if (judge.has(express[i].key + express[i].logic)) {
                        ok = false
                        msg = "重复表达式指标"
                        false
                    } else {
                        judge.set(express[i].key + express[i].logic,"join")
                    }

                }

                if (!ok) {
                    callback(new Error(msg));
                } else {
                    callback()
                }

            };

            var alertTcpConnectionStatusExprCheck = (rule, value, callback) => {
                let self = this

                let express = self.alertmanager.tcpConnectionStatus.expr
                let ok = true
                let msg = ""

                let judge = new Map()

                for (var i=0;i < express.length;i++) {
                    console.log(express[i].key)
                    console.log(express[i].logic)
                    console.log(express[i].value)
                    if (express[i].key === "" || express[i].value === "") {
                        ok = false
                        msg = "请完善空选项"
                        break
                    } else if (judge.has(express[i].key + express[i].logic)) {
                        ok = false
                        msg = "重复表达式指标"
                        false
                    } else {
                        judge.set(express[i].key + express[i].logic,"join")
                    }

                }

                if (!ok) {
                    callback(new Error(msg));
                } else {
                    callback()
                }

            };

            var alertDiskUsageExprCheck = (rule, value, callback) => {
                let self = this

                let express = self.alertmanager.diskUsage.expr
                let ok = true
                let msg = ""

                let judge = new Map()

                for (var i=0;i < express.length;i++) {
                    console.log(express[i].key)
                    console.log(express[i].logic)
                    console.log(express[i].value)
                    if (express[i].key === "" || express[i].value === "") {
                        ok = false
                        msg = "请完善空选项"
                        break
                    } else if (judge.has(express[i].key + express[i].logic)) {
                        ok = false
                        msg = "重复表达式指标"
                        false
                    } else {
                        judge.set(express[i].key + express[i].logic,"join")
                    }

                }

                if (!ok) {
                    callback(new Error(msg));
                } else {
                    callback()
                }

            };



            return {

                monitorNodes: [], //监控主机
                diskMonitorVisible:false,

                sysLoadColumn: null,
                memoryUsageGauge: null,
                rootUsageGauge: null,
                fileDescUsageGauge: null,
                tcpEstabTW: null,

                diskIOPS: null,
                diskIORate: null,
                diskUsageGauge: null,

                networkIO: null,
                tcpConn: null,


                settingData: {
                    ip: "",
                    durtion: "",
                },

                monitertimer: null,
                monitorSwitch: {
                    sysloadLine: false,
                    memoryUsage : false,
                    rootPartUsage: false,
                    openFiles: false,
                    tcpChartPie: false,

                    sdaRWIopsLine:false,
                    sdaRWRateLine:false,
                    diskUsage:false,

                    networkIOline:false,
                    tcpConnectionStatus:false
                },
                alertmanager: {
                    sysUpload: {
                        ip: "",
                        label: "SystemAvgLoad",
                        type: "Gauge",
                        status: false,
                        operation:["OR"], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        },
                            {
                                key: "",
                                logic:">",
                                value: "",
                            }
                        ],
                        receiver: "DingDing",
                    },
                    memoryUsage: {
                        ip: "",
                        label: "MemoryUsage",
                        type: "Gauge",
                        status: false,
                        operation:[], //AND OR
                        expr: [{
                            key: "Usage",
                            logic:">",
                            value: "",
                        }
                        ],
                        receiver: "DingDing",
                    },
                    rootPartUsage: {
                        ip: "",
                        label: "RootPartUsage",
                        type: "Gauge",
                        status: false,
                        operation:[], //AND OR
                        expr: [{
                            key: "Usage",
                            logic:">",
                            value: "",
                        }
                        ],
                        receiver: "DingDing",
                    },
                    openFiles: {
                        ip: "",
                        label: "OpenFiles",
                        type: "Gauge",
                        status: false,
                        operation:[], //AND OR
                        expr: [{
                            key: "OpenFiles",
                            logic:">",
                            value: "",
                        }
                        ],
                        receiver: "DingDing",
                    },
                    estabandtimewait: {
                      ip: "",
                      label: "EstabAndTimeWait",
                      type: "Gauge",
                      status: false,
                        operation:[], //AND OR
                      expr: [{
                          key: "",
                          logic:">",
                          value: "",
                      }],
                      receiver: "DingDing",
                    },

                    diskRWIOPS: {
                        ip: "",
                        label: "DiskReadWriteIops",
                        type: "Histogram",
                        status: false,
                        operation:["OR"], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        },
                            {
                                key: "",
                                logic:">",
                                value: "",
                            }
                        ],
                        receiver: "DingDing",
                    },
                    diskRWRate: {
                        ip: "",
                        label: "DiskReadWriteRate",
                        type: "Histogram",
                        status: false,
                        operation:["OR"], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        },
                            {
                                key: "",
                                logic:">",
                                value: "",
                            }],
                        receiver: "DingDing",
                    },
                    diskUsage: {
                        ip: "",
                        label: "DiskUsage",
                        type: "Gauge",
                        status: false,
                        operation:[], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        }],
                        receiver: "DingDing",
                    },


                    networkIORate: {
                        ip: "",
                        label: "NetworkIORate", //device en33 后端指定 TODO：优化匹配到任何非虚拟网口
                        type: "Histogram",
                        status: false,
                        operation:["OR"], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        },
                            {
                                key: "",
                                logic:">",
                                value: "",
                            }],
                        receiver: "DingDing",
                    },

                    tcpConnectionStatus: {
                        ip: "",
                        label: "TcpConnectionStatus", //device en33 后端指定 TODO：优化匹配到任何非虚拟网口
                        type: "Histogram",
                        status: false,
                        operation:["OR"], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        },
                            {
                                key: "",
                                logic:">",
                                value: "",
                            }],
                        receiver: "DingDing",
                    },
                },
                alertBackup: {
                    sysUpload: {
                        ip: "",
                        label: "SystemAvgLoad",
                        type: "Gauge",
                        status: false,
                        operation:["OR"], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        },
                            {
                                key: "",
                                logic:">",
                                value: "",
                            }
                        ],
                        receiver: "DingDing",
                    },
                    memoryUsage: {
                        ip: "",
                        label: "MemoryUsage",
                        type: "Gauge",
                        status: false,
                        operation:[], //AND OR
                        expr: [{
                            key: "Usage",
                            logic:">",
                            value: "",
                        }
                        ],
                        receiver: "DingDing",
                    },
                    rootPartUsage: {
                        ip: "",
                        label: "RootPartUsage",
                        type: "Gauge",
                        status: false,
                        operation:[], //AND OR
                        expr: [{
                            key: "Usage",
                            logic:">",
                            value: "",
                        }
                        ],
                        receiver: "DingDing",
                    },
                    openFiles: {
                        ip: "",
                        label: "OpenFiles",
                        type: "Gauge",
                        status: false,
                        operation:[], //AND OR
                        expr: [{
                            key: "OpenFiles",
                            logic:">",
                            value: "",
                        }
                        ],
                        receiver: "DingDing",
                    },
                    estabandtimewait: {
                        ip: "",
                        label: "EstabAndTimeWait",
                        type: "Gauge",
                        status: false,
                        operation:[], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        }],
                        receiver: "DingDing",
                    },

                    diskRWIOPS: {
                        ip: "",
                        label: "DiskReadWriteIops",
                        type: "Histogram",
                        status: false,
                        operation:["OR"], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        },
                            {
                                key: "",
                                logic:">",
                                value: "",
                            }
                        ],
                        receiver: "DingDing",
                    },
                    diskRWRate: {
                        ip: "",
                        label: "DiskReadWriteRate",
                        type: "Histogram",
                        status: false,
                        operation:["OR"], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        },
                            {
                                key: "",
                                logic:">",
                                value: "",
                            }],
                        receiver: "DingDing",
                    },
                    diskUsage: {
                        ip: "",
                        label: "DiskUsage",
                        type: "Gauge",
                        status: false,
                        operation:[], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        }],
                        receiver: "DingDing",
                    },


                    networkIORate: {
                        ip: "",
                        label: "NetworkIORate", //device en33 后端指定 TODO：优化匹配到任何非虚拟网口
                        type: "Histogram",
                        status: false,
                        operation:["OR"], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        },
                            {
                                key: "",
                                logic:">",
                                value: "",
                            }],
                        receiver: "DingDing",
                    },

                    tcpConnectionStatus: {
                        ip: "",
                        label: "TcpConnectionStatus", //device en33 后端指定 TODO：优化匹配到任何非虚拟网口
                        type: "Histogram",
                        status: false,
                        operation:["OR"], //AND OR
                        expr: [{
                            key: "",
                            logic:">",
                            value: "",
                        },
                            {
                                key: "",
                                logic:">",
                                value: "",
                            }],
                        receiver: "DingDing",
                    },
                },

                monitorHosts: {
                    cpuTotalCore: null,
                    memoryTotalValue: null,
                    sysAvgLoad: [],
                    memoryUsagedValue: 0,
                    rootUsagedValue: 0,
                    fileDescribeValue: 0,
                    estabAndTimeWaitValue: [],

                    diskIopsData: {
                        T: [

                        ],
                        X1:[

                        ],
                        X2:[

                        ],
                    },
                    sdaRateData: {
                        T: [

                        ],
                        X1:[

                        ],
                        X2:[

                        ],
                    },
                    diskStatus: [
                    ],

                    networkIoValue: {
                        T: [

                        ],
                        X1:[

                        ],
                        X2:[

                        ],
                    },
                    tcpConnStatusValue: {
                        T: [

                        ],
                        Estab:[

                        ],
                        TW:[

                        ],
                    },

                },

                //触发器校验规则
                monitorAlertRules: {

                    sysUploadCheckRule: [
                        { required: true, validator: alertsysloadExprCheck, trigger: 'blur'}
                    ],
                    memoryUsageCheckRule: [
                        { required: true, validator: alertMemoryUsageExprCheck}
                    ],
                    rootPartUsageCheckRule: [
                        { required: true, validator: alertRootPartUsageExprCheck}
                    ],
                    openFilesCheckRule: [
                        { required: true, validator: alertOpenFilesExprCheck}
                    ],
                    tcpConnectStatusRule: [
                        { required: true, validator: alertTcpConnectStatusExprCheck}
                    ],


                    diskRWIOPSCheckRule: [
                        { required: true, validator: alertdiskRWIOPSExprCheck, trigger: 'blur'}
                    ],
                    diskRWRATECheckRule: [
                        { required: true, validator: alertdiskRWRATEExprCheck, trigger: 'blur'}
                    ],

                    networkIOCheckRule: [
                        { required: true, validator: alertNetworkIOExprCheck, trigger: 'blur'}
                    ],
                    tcpConnectionCheckRule: [
                        { required: true, validator: alertTcpConnectionStatusExprCheck, trigger: 'blur'}
                    ],
                    diskUsageCheckRule: [
                        { required: true, validator: alertDiskUsageExprCheck, trigger: 'blur'}
                    ],





                },
            }
        },

        methods: {
            sysLoad() {
                let self = this
                this.sysLoadColumn = echarts.init(document.getElementById('sysload-chartColumn'));
                this.sysLoadColumn.setOption({
                  title: { text: '系统平均负载',
                      x: 'center'
                  },
                  tooltip: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            myPrometheusAlertSetting: {
                                show: true,
                                title: '告警配置',
                                icon: 'path://M916.736 760.928L864 716.032V480c0-161.44-108.672-297.504-256.864-339.008a96 96 0 1 0-190.272 0C268.672 182.496 160 318.56 160 480v237.856l-52.224 42.656a31.968 31.968 0 0 0-11.776 24.8v63.584a32 32 0 0 0 32 32h188.096c2.56 4.48 5.088 8.96 7.968 13.248a223.776 223.776 0 0 0 186.464 99.808 223.872 223.872 0 0 0 190.72-106.464c1.312-2.144 2.336-4.416 3.584-6.592H896a32 32 0 0 0 32-32v-63.584a32 32 0 0 0-11.264-24.384zM510.496 929.92a159.424 159.424 0 0 1-114.912-49.056h229.824a159.264 159.264 0 0 1-114.912 49.056zM864 816.864H160v-16.384l64-52.256V480a288.128 288.128 0 0 1 210.144-277.376l53.632-15.008-7.488-55.2a32 32 0 1 1 63.424 0l-7.488 55.2 53.632 15.008A288.128 288.128 0 0 1 800 480v265.6l64 54.496v16.768z',
                                onclick: function (){

                                    self.monitorSwitch.sysloadLine = true
                                }

                            },
                            // saveAsImage: {},
                        }
                    },
                  xAxis: {
                      data: ["1m", "5m", "15m"]
                  },
                  yAxis: {
                      type : 'value',
                      position: 'left',
                      min: 0,
                      max: 1,
                      splitNumber: 5,
                      scale: true
                      // data: [10,50,300,500,1024,1024*5,1024*10],
                      // boundaryGap: [0.8,0.2],
                      // scale: true,
                      // data:[0,25,50,75,100,200,1000]
                      // type: 'category',
                      // boundaryGap: false,
                      // data: [0,10,50,300,100,1000,3000]
                  },
                  series: [{
                      name: '负载',
                      type: 'bar',
                      // data: [0.16, 0.15, 0.28]
                      data: this.monitorHosts.sysAvgLoad,
                    }]
                });
            },
            memoryUsage() {
                let self = this

                this.memoryUsageGauge = echarts.init(document.getElementById('memory-chartGauge'));
                this.memoryUsageGauge.setOption({
                    title: { text: '内存使用率',
                        x: 'center'
                        },
                    tooltip : {
                        formatter: "{a} <br/>{b}{c}%"
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        // bottom: '1%',
                        top: '10%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            myPrometheusAlertSetting: {
                                show: true,
                                title: '告警配置',
                                icon: 'path://M916.736 760.928L864 716.032V480c0-161.44-108.672-297.504-256.864-339.008a96 96 0 1 0-190.272 0C268.672 182.496 160 318.56 160 480v237.856l-52.224 42.656a31.968 31.968 0 0 0-11.776 24.8v63.584a32 32 0 0 0 32 32h188.096c2.56 4.48 5.088 8.96 7.968 13.248a223.776 223.776 0 0 0 186.464 99.808 223.872 223.872 0 0 0 190.72-106.464c1.312-2.144 2.336-4.416 3.584-6.592H896a32 32 0 0 0 32-32v-63.584a32 32 0 0 0-11.264-24.384zM510.496 929.92a159.424 159.424 0 0 1-114.912-49.056h229.824a159.264 159.264 0 0 1-114.912 49.056zM864 816.864H160v-16.384l64-52.256V480a288.128 288.128 0 0 1 210.144-277.376l53.632-15.008-7.488-55.2a32 32 0 1 1 63.424 0l-7.488 55.2 53.632 15.008A288.128 288.128 0 0 1 800 480v265.6l64 54.496v16.768z',
                                onclick: function (){

                                    self.monitorSwitch.memoryUsage = true
                                }

                            },
                            // saveAsImage: {},
                        }
                    },
                    series: [
                        {
                            name: '使用率',
                            type: 'gauge',
                            center: ["50%", "60%"],
                            detail: {show:false},
                            data: [{value: this.monitorHosts.memoryUsagedValue}]
                        }
                    ]
                });
            },
            rootUsage() {
                let self = this
                this.rootUsageGauge = echarts.init(document.getElementById('root-chartGauge'));
                this.rootUsageGauge.setOption({
                    title: { text: '根分区使用率',
                        x: 'center'
                    },
                    tooltip : {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        feature: {
                            myPrometheusAlertSetting: {
                                show: true,
                                title: '告警配置',
                                icon: 'path://M916.736 760.928L864 716.032V480c0-161.44-108.672-297.504-256.864-339.008a96 96 0 1 0-190.272 0C268.672 182.496 160 318.56 160 480v237.856l-52.224 42.656a31.968 31.968 0 0 0-11.776 24.8v63.584a32 32 0 0 0 32 32h188.096c2.56 4.48 5.088 8.96 7.968 13.248a223.776 223.776 0 0 0 186.464 99.808 223.872 223.872 0 0 0 190.72-106.464c1.312-2.144 2.336-4.416 3.584-6.592H896a32 32 0 0 0 32-32v-63.584a32 32 0 0 0-11.264-24.384zM510.496 929.92a159.424 159.424 0 0 1-114.912-49.056h229.824a159.264 159.264 0 0 1-114.912 49.056zM864 816.864H160v-16.384l64-52.256V480a288.128 288.128 0 0 1 210.144-277.376l53.632-15.008-7.488-55.2a32 32 0 1 1 63.424 0l-7.488 55.2 53.632 15.008A288.128 288.128 0 0 1 800 480v265.6l64 54.496v16.768z',
                                onclick: function (){

                                    self.monitorSwitch.rootPartUsage = true
                                }

                            },
                            // saveAsImage: {},
                        }
                    },
                    series: [
                        {
                            name: '使用率',
                            type: 'gauge',
                            center: ["50%", "60%"],
                            detail: {
                                show:false
                            },
                            data: [{value: this.monitorHosts.rootUsagedValue}]
                        }
                    ]
                });
            },
            filedescUsage() {
                let self = this
                this.fileDescUsageGauge = echarts.init(document.getElementById('filedescnum-chartGauge'));
                this.fileDescUsageGauge.setOption({
                    title: { text: '当前打开的文件描述符',
                        x: 'center'
                    },
                    tooltip : {
                        formatter: "{a} <br/>{b} : {c}K"
                    },
                    toolbox: {
                        feature: {
                            myPrometheusAlertSetting: {
                                show: true,
                                title: '告警配置',
                                icon: 'path://M916.736 760.928L864 716.032V480c0-161.44-108.672-297.504-256.864-339.008a96 96 0 1 0-190.272 0C268.672 182.496 160 318.56 160 480v237.856l-52.224 42.656a31.968 31.968 0 0 0-11.776 24.8v63.584a32 32 0 0 0 32 32h188.096c2.56 4.48 5.088 8.96 7.968 13.248a223.776 223.776 0 0 0 186.464 99.808 223.872 223.872 0 0 0 190.72-106.464c1.312-2.144 2.336-4.416 3.584-6.592H896a32 32 0 0 0 32-32v-63.584a32 32 0 0 0-11.264-24.384zM510.496 929.92a159.424 159.424 0 0 1-114.912-49.056h229.824a159.264 159.264 0 0 1-114.912 49.056zM864 816.864H160v-16.384l64-52.256V480a288.128 288.128 0 0 1 210.144-277.376l53.632-15.008-7.488-55.2a32 32 0 1 1 63.424 0l-7.488 55.2 53.632 15.008A288.128 288.128 0 0 1 800 480v265.6l64 54.496v16.768z',
                                onclick: function (){

                                    self.monitorSwitch.openFiles = true
                                }

                            },
                            // saveAsImage: {},
                        }
                    },
                    series: [
                        {
                            name: '使用率',
                            type: 'gauge',
                            center: ["50%", "60%"],
                            detail: {show:false},
                            data: [{value: this.monitorHosts.fileDescribeValue}]
                        }
                    ]
                });
            },
            EstabAndTWPieChart() {
                let self = this
                this.tcpEstabTW = echarts.init(document.getElementById('tcp-chartPie'));
                this.tcpEstabTW.setOption({
                    title: {
                        text: 'Tcp连接数',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        top: 'bottom',
                        data: ['ESTABLISHED', 'TIME_WAIT']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            myPrometheusAlertSetting: {
                                show: true,
                                title: '告警配置',
                                icon: 'path://M916.736 760.928L864 716.032V480c0-161.44-108.672-297.504-256.864-339.008a96 96 0 1 0-190.272 0C268.672 182.496 160 318.56 160 480v237.856l-52.224 42.656a31.968 31.968 0 0 0-11.776 24.8v63.584a32 32 0 0 0 32 32h188.096c2.56 4.48 5.088 8.96 7.968 13.248a223.776 223.776 0 0 0 186.464 99.808 223.872 223.872 0 0 0 190.72-106.464c1.312-2.144 2.336-4.416 3.584-6.592H896a32 32 0 0 0 32-32v-63.584a32 32 0 0 0-11.264-24.384zM510.496 929.92a159.424 159.424 0 0 1-114.912-49.056h229.824a159.264 159.264 0 0 1-114.912 49.056zM864 816.864H160v-16.384l64-52.256V480a288.128 288.128 0 0 1 210.144-277.376l53.632-15.008-7.488-55.2a32 32 0 1 1 63.424 0l-7.488 55.2 53.632 15.008A288.128 288.128 0 0 1 800 480v265.6l64 54.496v16.768z',
                                onclick: function (){
                                    // alert('myToolHandler2')
                                    console.log(self.monitorSwitch.tcpChartPie)
                                    self.monitorSwitch.tcpChartPie = true
                                }

                            },
                            // saveAsImage: {},
                        }
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [
                                { value: this.monitorHosts.estabAndTimeWaitValue[0], name: 'ESTABLISHED' },
                                { value: this.monitorHosts.estabAndTimeWaitValue[1], name: 'TIME_WAIT' },
                            ],

                        }
                    ]
                });
            },

            diskIopsLineChart() {
                let self = this
                this.diskIOPS = echarts.init(document.getElementById('diskIopsLine'));
                this.diskIOPS.setOption({
                    title: {
                        text: '磁盘读写速率 (IOPS)'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{a0}:{c0} iops <br/>{a1}:{c1} iops',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['read', 'write']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            myPrometheusAlertSetting: {
                                show: true,
                                title: '告警配置',
                                icon: 'path://M916.736 760.928L864 716.032V480c0-161.44-108.672-297.504-256.864-339.008a96 96 0 1 0-190.272 0C268.672 182.496 160 318.56 160 480v237.856l-52.224 42.656a31.968 31.968 0 0 0-11.776 24.8v63.584a32 32 0 0 0 32 32h188.096c2.56 4.48 5.088 8.96 7.968 13.248a223.776 223.776 0 0 0 186.464 99.808 223.872 223.872 0 0 0 190.72-106.464c1.312-2.144 2.336-4.416 3.584-6.592H896a32 32 0 0 0 32-32v-63.584a32 32 0 0 0-11.264-24.384zM510.496 929.92a159.424 159.424 0 0 1-114.912-49.056h229.824a159.264 159.264 0 0 1-114.912 49.056zM864 816.864H160v-16.384l64-52.256V480a288.128 288.128 0 0 1 210.144-277.376l53.632-15.008-7.488-55.2a32 32 0 1 1 63.424 0l-7.488 55.2 53.632 15.008A288.128 288.128 0 0 1 800 480v265.6l64 54.496v16.768z',
                                onclick: function (){
                                    // alert('myToolHandler2')
                                    console.log(self.monitorSwitch.sdaRWIopsLine)
                                    self.monitorSwitch.sdaRWIopsLine = true
                                }

                            },
                            // saveAsImage: {},
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorHosts.diskIopsData.T
                    },
                    yAxis: {
                        type : 'value',
                        position: 'left',
                        scale: true
                        // data: [10,50,300,500,1024,1024*5,1024*10],
                        // boundaryGap: [0.8,0.2],
                        // scale: true,
                        // data:[0,25,50,75,100,200,1000]
                        // type: 'category',
                        // boundaryGap: false,
                        // data: [0,10,50,300,100,1000,3000]
                        },
                    series: [
                        {
                            name: 'read',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#E5F5C7',
                                }
                            },
                            data: this.monitorHosts.diskIopsData.X1
                        },
                        {
                            name: 'write',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#CAEA8A',
                                }
                            },
                            data: this.monitorHosts.diskIopsData.X2
                        }
                    ]
                });
            },
            diskIORateLineChart() {
                let self = this
                this.diskIORate = echarts.init(document.getElementById('diskIORateLine'));
                this.diskIORate.setOption({
                    title: {
                        text: '磁盘读写速度(kB/s)'
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['read', 'write']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            myPrometheusAlertSetting: {
                                show: true,
                                title: '告警配置',
                                icon: 'path://M916.736 760.928L864 716.032V480c0-161.44-108.672-297.504-256.864-339.008a96 96 0 1 0-190.272 0C268.672 182.496 160 318.56 160 480v237.856l-52.224 42.656a31.968 31.968 0 0 0-11.776 24.8v63.584a32 32 0 0 0 32 32h188.096c2.56 4.48 5.088 8.96 7.968 13.248a223.776 223.776 0 0 0 186.464 99.808 223.872 223.872 0 0 0 190.72-106.464c1.312-2.144 2.336-4.416 3.584-6.592H896a32 32 0 0 0 32-32v-63.584a32 32 0 0 0-11.264-24.384zM510.496 929.92a159.424 159.424 0 0 1-114.912-49.056h229.824a159.264 159.264 0 0 1-114.912 49.056zM864 816.864H160v-16.384l64-52.256V480a288.128 288.128 0 0 1 210.144-277.376l53.632-15.008-7.488-55.2a32 32 0 1 1 63.424 0l-7.488 55.2 53.632 15.008A288.128 288.128 0 0 1 800 480v265.6l64 54.496v16.768z',
                                onclick: function (){
                                    // alert('myToolHandler2')
                                    console.log(self.monitorSwitch.sdaRWRateLine)
                                    self.monitorSwitch.sdaRWRateLine = true
                                }

                            },
                            // saveAsImage: {},
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorHosts.sdaRateData.T
                    },
                    yAxis: {
                        type : 'value',
                        position: 'left',

                        scale: true
                        // data: [10,50,300,500,1024,1024*5,1024*10],
                        // boundaryGap: [0.8,0.2],
                        // scale: true,
                        // data:[0,25,50,75,100,200,1000]
                        // type: 'category',
                        // boundaryGap: false,
                        // data: [0,10,50,300,100,1000,3000]
                    },
                    series: [
                        {
                            name: 'read',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#EAD28A',
                                }
                            },
                            data: this.monitorHosts.sdaRateData.X1
                        },
                        {
                            name: 'write',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: this.monitorHosts.sdaRateData.X2
                        }
                    ]
                });
            },

            networkLineChart() {
                let self = this
                this.networkIO = echarts.init(document.getElementById('networkLine'));
                this.networkIO.setOption({
                    title: {
                        text: '网络IO(kbps)'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['receive', 'transmit']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            myPrometheusAlertSetting: {
                                show: true,
                                title: '告警配置',
                                icon: 'path://M916.736 760.928L864 716.032V480c0-161.44-108.672-297.504-256.864-339.008a96 96 0 1 0-190.272 0C268.672 182.496 160 318.56 160 480v237.856l-52.224 42.656a31.968 31.968 0 0 0-11.776 24.8v63.584a32 32 0 0 0 32 32h188.096c2.56 4.48 5.088 8.96 7.968 13.248a223.776 223.776 0 0 0 186.464 99.808 223.872 223.872 0 0 0 190.72-106.464c1.312-2.144 2.336-4.416 3.584-6.592H896a32 32 0 0 0 32-32v-63.584a32 32 0 0 0-11.264-24.384zM510.496 929.92a159.424 159.424 0 0 1-114.912-49.056h229.824a159.264 159.264 0 0 1-114.912 49.056zM864 816.864H160v-16.384l64-52.256V480a288.128 288.128 0 0 1 210.144-277.376l53.632-15.008-7.488-55.2a32 32 0 1 1 63.424 0l-7.488 55.2 53.632 15.008A288.128 288.128 0 0 1 800 480v265.6l64 54.496v16.768z',
                                onclick: function (){
                                    self.monitorSwitch.networkIOline = true
                                }

                            },
                            // saveAsImage: {},
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorHosts.networkIoValue.T
                    },
                    yAxis: {
                        type : 'value',
                        position: 'left',
                        scale: true
                        // data: [10,50,300,500,1024,1024*5,1024*10],
                        // boundaryGap: [0.8,0.2],
                        // scale: true,
                        // data:[0,25,50,75,100,200,1000]
                        // type: 'category',
                        // boundaryGap: false,
                        // data: [0,10,50,300,100,1000,3000]
                    },
                    series: [
                        {
                            name: 'receive',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#B60727',
                                }
                            },
                            data: this.monitorHosts.networkIoValue.X1
                        },
                        {
                            name: 'transmit',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#0FB607',
                                }
                            },
                            data: this.monitorHosts.networkIoValue.X2
                        }
                    ]
                });
            },
            tcpConnLineChart() {
                let self = this
                this.tcpConn = echarts.init(document.getElementById('tcpConnLine'));
                this.tcpConn.setOption({
                    title: {
                        text: 'tcp连接情况'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['ESTABLISHED', 'TIME_WAIT']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorHosts.tcpConnStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                        position: 'left',
                        scale: true
                        // data: [10,50,300,500,1024,1024*5,1024*10],
                        // boundaryGap: [0.8,0.2],
                        // scale: true,
                        // data:[0,25,50,75,100,200,1000]
                        // type: 'category',
                        // boundaryGap: false,
                        // data: [0,10,50,300,100,1000,3000]
                    },
                    toolbox: {
                        feature: {
                            myPrometheusAlertSetting: {
                                show: true,
                                title: '告警配置',
                                icon: 'path://M916.736 760.928L864 716.032V480c0-161.44-108.672-297.504-256.864-339.008a96 96 0 1 0-190.272 0C268.672 182.496 160 318.56 160 480v237.856l-52.224 42.656a31.968 31.968 0 0 0-11.776 24.8v63.584a32 32 0 0 0 32 32h188.096c2.56 4.48 5.088 8.96 7.968 13.248a223.776 223.776 0 0 0 186.464 99.808 223.872 223.872 0 0 0 190.72-106.464c1.312-2.144 2.336-4.416 3.584-6.592H896a32 32 0 0 0 32-32v-63.584a32 32 0 0 0-11.264-24.384zM510.496 929.92a159.424 159.424 0 0 1-114.912-49.056h229.824a159.264 159.264 0 0 1-114.912 49.056zM864 816.864H160v-16.384l64-52.256V480a288.128 288.128 0 0 1 210.144-277.376l53.632-15.008-7.488-55.2a32 32 0 1 1 63.424 0l-7.488 55.2 53.632 15.008A288.128 288.128 0 0 1 800 480v265.6l64 54.496v16.768z',
                                onclick: function (){
                                    self.monitorSwitch.tcpConnectionStatus = true
                                }

                            },
                            // saveAsImage: {},
                        }
                    },
                    series: [
                        {
                            name: 'ESTABLISHED',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: this.monitorHosts.tcpConnStatusValue.Estab
                        },
                        {
                            name: 'TIME_WAIT',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorHosts.tcpConnStatusValue.TW
                        }
                    ]
                });
            },

            getAllMonitorNodes(host){
                let self = this
                getMonitorNodes().then((res) => {
                        // this.ipALL = res.data.iplists
                    self.monitorNodes =  res.data.nodes

                    if (host === null || host === undefined){

                        self.settingData.ip = res.data.nodes[0]
                    }else {
                        self.settingData.ip = host
                    }

                    this.$nextTick(function () {
                        this.getMonitorHostData()
                        // this.getMonitorAlertData()
                    })

                    }
                )
            },

            drawCharts() {
                if (!this.monitorSwitch.sysloadLine){
                    this.sysLoad()
                }
                if (!this.monitorSwitch.memoryUsage){
                    this.memoryUsage()
                }
                if (!this.monitorSwitch.rootPartUsage){
                    this.rootUsage()
                }
                if (!this.monitorSwitch.openFiles){
                    this.filedescUsage()
                }

                if (!this.monitorSwitch.tcpChartPie){
                    this.EstabAndTWPieChart()
                }
                if (!this.monitorSwitch.sdaRWIopsLine){
                    this.diskIopsLineChart()
                }
                if (!this.monitorSwitch.sdaRWRateLine){
                    this.diskIORateLineChart()
                }


                if (!this.monitorSwitch.networkIOline){
                    this.networkLineChart()
                }

                if (!this.monitorSwitch.tcpConnectionStatus){
                    this.tcpConnLineChart()
                }



            },

            disHeaderClass(){
                return 'background:#8592AD;color:blue;height;'
            },
            disrowClass(){
                return 'background:#F5F5F5;height:30px'
            },
            tableHeaderClass() {
                return 'height:20px;background:red;'
            },
            tablePaddingClass(){
              return 'padding:0px'
            },
            setTimer() {
                if(this.monitertimer == null) {
                    this.monitertimer = setInterval( () => {
                        this.getMonitorHostData()
                    }, 3000000)
                }
            },
            getMonitorHostData(){
                console.log("debug")
                let self = this
                let param = {ip:this.settingData.ip,durtion:"30"}
                // self.alertmanager = self.alertBackup.concat();  //清理告警配置

                self.alertmanager = Object.assign({},self.alertBackup)

                monitorHostData(param).then((res) => {
                        console.log(res)
                        if (res.core === "") {
                            this.$message.error('内部出错，该主机可能没有安装node_exploer');
                        }
                        this.monitorHosts.cpuTotalCore = res.core
                        this.monitorHosts.memoryTotalValue = res.memory
                        this.monitorHosts.sysAvgLoad = res.sysload
                        this.monitorHosts.memoryUsagedValue = res.memoryUsed
                        this.monitorHosts.rootUsagedValue = res.root
                        this.monitorHosts.fileDescribeValue = res.fileDescNum
                        this.monitorHosts.estabAndTimeWaitValue = res.tcpestabAndTW

                        this.monitorHosts.diskIopsData = res.diskIops
                        this.monitorHosts.sdaRateData = res.sdaRate
                        this.monitorHosts.diskStatus = res.diskUsage


                        this.monitorHosts.networkIoValue = res.eth33IO
                        this.monitorHosts.tcpConnStatusValue = res.tcpConnStat

                        this.diskMonitorVisible = true

                    }
                )
                this.getMonitorAlertData()
            },
            getMonitorAlertData(){
                let self = this

                let param = {ip:this.settingData.ip}
                monitorAlertData(param).then((res) => {
                    if (res.alerts !== null) {
                        for(var j = 0,len = res.alerts.length; j < len; j++){
                            console.log(res.alerts[j].label)
                            if (res.alerts[j].label === "SystemAvgLoad") {
                                self.alertmanager.sysUpload = res.alerts[j]
                            }else if (res.alerts[j].label === "MemoryUsage") {
                                self.alertmanager.memoryUsage = res.alerts[j]
                            }else if (res.alerts[j].label === "RootPartUsage") {
                                self.alertmanager.rootPartUsage = res.alerts[j]
                            }else if (res.alerts[j].label === "OpenFiles") {
                                self.alertmanager.openFiles = res.alerts[j]
                            } else if (res.alerts[j].label === "EstabAndTimeWait") {
                                self.alertmanager.estabandtimewait = res.alerts[j]


                            }else if (res.alerts[j].label === "DiskReadWriteIops") {
                                self.alertmanager.diskRWIOPS = res.alerts[j]
                            }else if (res.alerts[j].label === "DiskReadWriteRate") {
                                self.alertmanager.diskRWRate = res.alerts[j]
                            }else if (res.alerts[j].label === "NetworkIORate") {
                                self.alertmanager.networkIORate = res.alerts[j]
                            }else if (res.alerts[j].label === "TcpConnectionStatus") {
                                self.alertmanager.tcpConnectionStatus = res.alerts[j]
                            }
                        }
                    }

                    }
                )
            },
            alertEntrySetHandle(key,refname) {

                this.$refs[refname].validate((valid) => {
                    if (valid) {
                        let param = key
                        if (key.label === "EstabAndTimeWait") {
                            this.alertmanager.estabandtimewait.ip = this.settingData.ip
                            alertEntrySet(param).then((res) => {

                            })
                            this.monitorSwitch.tcpChartPie = false
                        }else if (key.label === "DiskReadWriteRate") {
                            this.alertmanager.diskRWRate.ip = this.settingData.ip
                            alertEntrySet(param).then((res) => {

                            })
                            this.monitorSwitch.sdaRWRateLine = false
                        }else if (key.label === "DiskReadWriteIops") {
                            this.alertmanager.diskRWIOPS.ip = this.settingData.ip
                            alertEntrySet(param).then((res) => {

                            })
                            this.monitorSwitch.sdaRWIopsLine = false
                        }else if (key.label === "NetworkIORate") {
                            this.alertmanager.networkIORate.ip = this.settingData.ip
                            alertEntrySet(param).then((res) => {

                            })
                            this.monitorSwitch.networkIOline = false
                        }else if (key.label === "SystemAvgLoad") {
                            this.alertmanager.sysUpload.ip = this.settingData.ip
                            alertEntrySet(param).then((res) => {

                            })
                            this.monitorSwitch.sysloadLine = false
                        }else if (key.label === "MemoryUsage") {
                            this.alertmanager.memoryUsage.ip = this.settingData.ip
                            alertEntrySet(param).then((res) => {

                            })
                            this.monitorSwitch.memoryUsage = false
                        }else if (key.label === "RootPartUsage") {
                            this.alertmanager.rootPartUsage.ip = this.settingData.ip
                            alertEntrySet(param).then((res) => {

                            })
                            this.monitorSwitch.rootPartUsage = false
                        }else if (key.label === "OpenFiles") {
                            this.alertmanager.openFiles.ip = this.settingData.ip
                            alertEntrySet(param).then((res) => {

                            })
                            this.monitorSwitch.openFiles = false
                        }else if (key.label === "TcpConnectionStatus") {
                            this.alertmanager.tcpConnectionStatus.ip = this.settingData.ip
                            alertEntrySet(param).then((res) => {

                            })
                            this.monitorSwitch.tcpConnectionStatus = false
                        }else if (key.label === "DiskUsage") {
                            this.alertmanager.diskUsage.ip = this.settingData.ip
                            alertEntrySet(param).then((res) => {

                            })
                            this.monitorSwitch.diskUsage = false
                        }






                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });





            },

            reloadChart() {
                let self = this
                self.getMonitorHostData()
            },
            deleteTriggerExpr(entry,index){
                entry.expr.splice(index, 1)
                entry.operation.splice(index, 1)

            },

            addTriggerExpr(entry,index) {
                console.log(index)
                // let item = expr[expr.length - 1]
                entry.expr.push({
                    key: "",
                    logic:">",
                    value: "",
                })
                entry.operation.push("OR")

            }

        },
        created: function() {
        },
        mounted: function () {

            // console.log(this.$route.query.host)
            //
            this.getAllMonitorNodes(this.$route.query.host)

            this.setTimer()
            // this.getMonitorHostData()
            // this.getMonitorAlertData()
            this.drawCharts()

        },
        destroyed: function () {  //单组件页面
            // 每次离开当前界面时，清除定时器
            clearInterval(this.monitertimer)
            this.monitertimer = null
        },
        updated: function () {
            this.drawCharts()
        }
    }
</script>

<style >
    #monitor-node {
        width: 100%;
        float: left;
    }
    /*.chart div {
        height: 400px;
        float: left;
    }*/
    #monitor-node .monitor-dark {
        background-color: 		#F5F5F5;
        margin-bottom: 5px;
        margin-top: 5px;
        height: 250px;
        /*margin-right: 5px;*/

    }

    #monitor-node .monitor-helf-dark {
        background-color: 		#F5F5F5;
        margin-bottom: 5px;
        margin-top: 5px;
        height: 120px;
        /*margin-right: 5px;*/
    }
    #monitor-node .minizisesizesize{
        width: 80px;
        -webkit-transform: scale(0.8) !important;
    }
    #monitor-node .minizisevery{
        /*width: 80px;*/
        width: 100%;
        font-size: xx-small;
        /*-webkit-transform: scale(0.7) !important;*/
    }

    #monitor-node .minizisevery .el-input__inner{
        /*width: 80px;*/
        height: 20px !important;
        padding: 0 1px;
        /*-webkit-transform: scale(0.7) !important;*/
    }
    #monitor-node .minizisevery  .el-select__caret{
        /*width: 80px;*/
        display: none !important;
        /*-webkit-transform: scale(0.7) !important;*/
    }





    #monitor-node .minizisesize60{
        width: 50px;
        -webkit-transform: scale(0.8) !important;
    }
    #monitor-node .el-form-item {
        margin-bottom: 5px;
    }
    #monitor-node .minizisesizesize  .el-input__inner {
        background-color: rgb(236, 245, 255) !important;
    }
    #monitor-node .grayblue .el-input__inner {
        background-color: #CCEEFF !important;
    }

    #monitor-node .el-table__header th {
        padding: 0;
        height: 30px;
    }
    #monitor-node .el-form-item__error {
        z-index: 1;
        margin-left: 5px;
    }

</style>
